import * as React from 'react';
import './EditorLightComponent.scss';
import { EVENT_DRAG_TYPE, EnumDragType } from '../../EditorContent/EditorContent';
import { loadUrl } from '@/utils/Utils';
import { EditorModels } from '@/view/editor/ts/EditorModels';
export interface IEditorLightComponentProps {
  editorScene: EditorModels;
}
export type ILightType = 'PointLight' | 'SpotLight' | 'RectAreaLight';
let image = new Image();
image.src = loadUrl('@/assets/image/icon-move.png');
export default function EditorLightComponent(props: IEditorLightComponentProps) {
  /** 灯光拖拽事件开始 */
  const lightDragStartHandle = (e: React.DragEvent<HTMLDivElement>, lightType: ILightType) => {
    e.dataTransfer.setDragImage(image, 16, 16);
    props.editorScene.$emit(EVENT_DRAG_TYPE, EnumDragType.LIGHT_DRAG);
    props.editorScene.creatLightInPlane(lightType);
  };

  /** 灯光拖拽事件结束 */
  const lightDragEndHandle = (e: React.DragEvent<HTMLDivElement>, lightType: ILightType) => {
    let currentCreateModel = props.editorScene.currentCreateModel;
    // 当前的要创建的模型，没有变成null的话，说明还需要，否则进行销毁
    if (currentCreateModel) {
      props.editorScene.disposeGroup(currentCreateModel);
      props.editorScene.currentCreateModel = null;
    }
  };
  return (
    <div className="editorLightComponent">
      <div
        className="itemBox"
        onDragStart={(e) => {
          lightDragStartHandle(e, 'PointLight');
        }}
        onDragEnd={(e) => {
          lightDragEndHandle(e, 'PointLight');
        }}
        draggable="true"
      >
        <div className="img">
          <div className="iconfont icon-insight"></div>
        </div>
        <div className="name">点光源</div>
      </div>
      <div
        className="itemBox"
        onDragStart={(e) => {
          lightDragStartHandle(e, 'SpotLight');
        }}
        onDragEnd={(e) => {
          lightDragEndHandle(e, 'SpotLight');
        }}
        draggable="true"
      >
        <div className="img">
          <div className="iconfont icon-spotlight"></div>
        </div>
        <div className="name">聚光灯</div>
      </div>
    </div>
  );
}
